<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>统计分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./lib/css/layui.css" media="all">
</head>

<body>
    <!-- 查询 -->
    <form class="layui-form layui-row" action="" lay-filter="tableFilter" style="width: 90%;">
        <div class="layui-col-xs3 layui-form-item">
            <label class="layui-form-label">会员编号:</label>
            <div class="layui-input-block">
                <input type="text" name="member_no" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3 layui-form-item ">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3 layui-form-item ">
            <label class="layui-form-label">年龄:</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs3">
            <div class="layui-input-block">
                <button lay-submit lay-filter="search" class="layui-btn layui-btn-normal">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 表格 -->
    <table class="layui-hide" id="mainTable" lay-filter="mainTable"></table>
    <div>
        <!-- 编辑 -->
        <div id="historyPage" style="width:800px;height: 650px;display: none;">
        </div>
        <!-- 编辑结束 -->
    </div>
    <script src="./lib/layui.js" charset="utf-8"></script>
    <script src="./config.js"></script>

    <script>
        var currrowId = "";
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        layui.use(['table', "form", "layer", "jquery", "laydate"], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            var laydate = layui.laydate;
            var layer = layui.layer;
            table.render({
                elem: '#mainTable'
                , headers: { Authorization: "bearer " + getQueryString('token') }
                , request: { pageName: "pageIndex", limitName: "pageSize" }
                , parseData: function (res) {
                    return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
                }
                , page: true
                , url: requestUrl + '/service/focus-service/device/members'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {
                        field: "id", width: 80, title: '序号', templet: function (d) {
                            return d.LAY_INDEX+'<i class="layui-icon layui-icon-triangle-r main-color main-cursor showOrHide"data-index='+d.LAY_INDEX+'></i>';
                        }
                    }
                    , { field: 'channel', title: '渠道' }
                    , { field: 'salesPerson', title: '销售顾问' }
                    , { field: 'member_no', title: '会员编号' }
                    , { field: 'name', title: '会员姓名', }
                    , { field: 'sex', title: '性别', }
                    , { field: 'age', title: '年龄', }
                    , { field: 'feeDate', title: '最后收费时间', }
                    , { field: 'feeName', title: '收费名称', }
                    , { field: 'money', title: '总收费金额', }
                    // , { field: 'notes', title: '备注', }
                    // , { title: "操作", width: 220, templet: "#tableOperation" }
                ]]
                , done: function (res, curr, count) {
                    var tabData = res.data || [];
                    //向每一行tr后面追加显示子table的tr
                    var trEles = $(".layui-table-view[lay-id=mainTable] tbody tr");
                    for (var i = 0; i < trEles.length; i++) {
                        var childTr = 
                        '<tr style="display:none" class="childTR'+(i + 1)+'"><td></td>'+
                        '<td colspan="16" ><div class="child-table-item">'+
                        '<table id="childTable'+(i + 1)+'"></table></div></td></tr>';
                        $(trEles[i]).after(childTr);
                    }

                    //渲染表格
                    for (var i = 0; i < trEles.length; i++) {
                        table.render({
                            elem: '#childTable'+(i + 1)
                            //, height: "300"
                            , url: requestUrl + "/service/focus-service/device/fees" //数据接口
                            , method: "GET"
                            , headers: { Authorization: "bearer " + getQueryString('token') }
                            , request: { pageName: "pageIndex", limitName: "pageSize" }
                            , where: { memberId: tabData[i].id }
                            , even: true
                            , page: true //开启分页
                            , cellMinWidth: 80
                            , cols: [[ //表头
                                { type: 'numbers', width: 80, title: '序号', width: 40 }
                                , { field: 'name', title: '收费名称', width:100}
                                , { field: 'feeDate', title: '收费日期', width: 170 }
                                , { field: 'tollman', title: '收费人', width: 80 }
                                , { field: 'money', title: '收费金额', width:100 }
                                , { field: 'notes', title: '备注', width:200}
                            ]]
                            , parseData: function (res) {
                                return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
                            }
                        });
                    }
                    //点击箭头隐藏或显示
                    $(".showOrHide").click(function () {
                        let classStr = $(this).attr("class");
                        let index = $(this).data("index");
                        if (classStr.indexOf("layui-icon-triangle-r") > -1) {
                            //显示
                            $(this).removeClass("layui-icon-triangle-r");
                            $(this).addClass("layui-icon-triangle-d");
                            $('.childTR'+index).show();
                        } else {
                            //隐藏
                            $(this).removeClass("layui-icon-triangle-d");
                            $(this).addClass("layui-icon-triangle-r");
                            $('.childTR'+index).hide();
                        }

                    })
                }
            });
            table.on('tool(mainTable)', function (obj) {
                switch (obj.event) {
                    case "viewHistory":
                        layer.open({
                            type: 1,
                            skin: "layui-layer-rim", //加上边框
                            content: $('#historyPage')
                        });
                        break;
                    case "viewReport":
                        layer.open({
                            type: 1,
                            skin: "layui-layer-rim", //加上边框
                            content: $('#historyPage'),
                            title: "查看报告"
                        });
                        break;
                }
            });
            form.on("submit(search)", function (data) {
                table.reload("mainTable", { where: data.field });
                return false;
            })

        });
        function request($, type, url, data, success) {
            $.ajax({
                url: url,
                data: data,
                type: type,
                headers: { Authorization: "bearer " + getQueryString('token') },
                success: function (res) {
                    success(res)
                }
            })
        }
    </script>
</body>
<style>
    .layui-form-item {
        clear: inherit;
    }
</style>

</html>